<template>
	<view class="comment">
		<view
			@click="$_To('post/post?pid=' + theFirstFloor.replyToPost.pid)"
			class="reply-to-post"
			v-if="theFirstFloor&&theFirstFloor.replyToPost">
			<text>原帖</text><text>{{theFirstFloor.replyToPost.title?theFirstFloor.replyToPost.title:$_filterHtml(theFirstFloor.replyToPost.content)}}</text>
		</view>
		<view class="for" v-if="theFirstFloor">
			<view class="left" @click="$_To('user/user?uid=' + theFirstFloor.author.uid)">
				<view class="avatar">
					<image :src="theFirstFloor.author.avatar" mode="widthFix"></image>
				</view>
				<view
					class="roleName"
					:style="'background:'+theFirstFloor.author.nicknameColor+';'">{{theFirstFloor.author.roleName[0]}}</view>
			</view>
			<view class="right">
				<view class="top">
					<view class="top-left" @click="$_To('user/user?uid=' + theFirstFloor.author.uid)">
						<text class="nickname">{{theFirstFloor.author.nickname}}</text>
						<text class="roleName" :style="'color:'+theFirstFloor.author.nicknameColor+';'">
							{{theFirstFloor.author.roleName}}
						</text>
						<text class="the-first-floor">楼主</text>
					</view>
					<view class="top-right">
						<view @click="clickOperate('like',theFirstFloor.cid)">
							<text class="iconfont icon-good"></text>
							<text class="db">
								{{theFirstFloor.likeCount ? theFirstFloor.likeCount : '赞'}}
							</text>
						</view>
						<view @click="clickOperate('dislike',theFirstFloor.cid)">
							<text class="iconfont icon-bad"></text>
							<text class="db">
								{{theFirstFloor.dislikeCount ? theFirstFloor.dislikeCount : '踩'}}
							</text>
						</view>
					</view>
				</view>
				<view class="content">
					<mp-html
						:content="$_contentObservers(theFirstFloor.content)"
						selectable="true"></mp-html>
				</view>
				<template v-if="theFirstFloor.files.audios.length">
					<template v-for="(audios,index) in theFirstFloor.files.audios">
						<view style="margin-top: 20rpx;padding-bottom: 20rpx;">
							<public-audio
								Css="width:350rpx;"
								:Url="audios.audioUrl"></public-audio>
						</view>
					</template>
				</template>
				<template v-if="theFirstFloor.files.images.length">
					<view class="files-image">
						<view
							@click="$_picturePreview(index,theFirstFloor.files.images)"
							v-for="(img,index) in theFirstFloor.files.images">
							<image :src="img.imageBigUrl" mode="widthFix"></image>
						</view>
					</view>
				</template>
				<template v-if="theFirstFloor.files.videos.length">
					<view
						@click="$_To('public/video?url=' + video.videoUrl)"
						v-for="video in theFirstFloor.files.videos"
						class="files-video"
						:style="'background: #EBEEF5 url('+video.videoPosterUrl+');background-size: 100%;background-repeat: no-repeat;background-position: center;'">
						<text class="iconfont icon-play"></text>
					</view>
				</template>
				<view class="info">
					<view class="createTime">{{theFirstFloor.createTimeFormat}}</view>
				</view>
			</view>
		</view>
		<view class="text-title">全部回复</view>
		<view class="comment-box">
			<textarea
				:placeholder="placeholderText"
				placeholder-style="font-size: 28rpx;color:#C0C4CC;"
				v-model="content"
				maxlength="-1"
				:focus="focus"></textarea>
			<view @click="clickPostComments">发布</view>
		</view>
		<view class="emoji-button" @click="clickEmoji">
			<text class="iconfont icon-smile"></text>
		</view>
		<view class="emoji-list" v-if="emojiState">
			<template v-if="emojiList.length">
				<scroll-view scroll-y>
					<text
						@click="clickclickEmojiItem(item)"
						v-for="item in emojiList">{{item}}</text>
				</scroll-view>
			</template>
			<template v-else>
				<public-loading></public-loading>
			</template>
		</view>
		<!-- 列表，评论列表 -->
		<template v-if="listComment.length">
			<list-comment
				v-for="item in listComment"
				:Item="item"
				ref="refListComment"></list-comment>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				theFirstFloor:null,
				listComment:[],
				content:"",
				focus:false,
				emojiState:false,
				emojiList:[],
				placeholderText:"说点什么吧..."
			}
		},
		mounted(){
			uni.$on('commentListRenew',() => {
				this.$refs.refListComment[0].getList()
			})
			uni.$on('cidValueTransfer',(data) => {
				this.placeholderText = `回复 ${data.username}`;
				this.cid = data.cid;
				this.focus = true;
			})
		},
		onUnload() {
			uni.$off('commentListRenew')
			uni.$off('cidValueTransfer')
		},
		onLoad(e) {
			this.cid = e.cid;
			uni.request({
				url:this.$_Config() + "Config.json",
				method:'GET',
				success: (res) => {
					this.emojiList = res.data.allEmoji;
					// 获取楼主信息
					this.getTheFirstFloor();
				}
			})
		},
		methods: {
			// 获取楼主信息
			getTheFirstFloor(){
				this.$_Request(
					"GET","/api/v2/comment/" + this.cid + "/detail",
					{
						"whitelistKeys":"author.uid,author.avatar,author.nicknameColor,author.roleName,author.nickname,likeCount,dislikeCount,content,createTimeFormat,cid,replyToPost.pid,replyToPost.title,replyToPost.content,files"
					},
					(res) => {
						this.theFirstFloor = res.data.data.detail;
						// 获取评论列表
						this.getCommentList();
					}
				)
			},
			// 获取评论列表
			getCommentList(){
				this.listComment = [
					{
						"order": 0,
						"css": "",
						"page": true,
						"replyToComment":true,
						"query": {
							"???": "https://zh-hans.fresns.org/api/comment/list.html",
							"mapId":"",
							"mapLng":"",
							"mapLat":"",
							"uidOrUsername":"",
							"pid":"",
							"cid":this.cid,
							"hid":"",
							"gid":"",
							"includeSubgroups":1,
							"sticky":"",
							"allDigest":"",
							"digestState":"",
							"contentType":"",
							"createdDays": "",
							"createdDate":"",
							"createdDateGt":"",
							"createdDateLt":"",
							"likeCountGt":"",
							"likeCountLt":"",
							"followCountGt":"",
							"followCountLt":"",
							"blockCountGt":"",
							"blockCountLt":"",
							"commentCountGt":"",
							"commentCountLt":"",
							"orderType":"",
							"orderDirection":"",
							"pageSize":15
						}
					}
				]
			},
			// 操作帖子
			clickOperate(type,cid){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/user/mark",
					{
						"interactionType":type,
						"markType":"comment",
						"fsid":cid
					},
					(res) => {
						if(res.data.code == 0){
							this.getTheFirstFloor();
							uni.hideLoading();
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 1000
							});
						}
					}
				)
			},
			// 回复评论
			clickPostComments(){
				uni.showLoading();
				this.$_Request(
					"POST","/api/v2/editor/comment/quick-publish",
					{
						"commentPid":this.theFirstFloor.replyToPost.pid,
						"commentCid":this.cid,
						"content":this.content
					},
					(res) => {
						if(res.data.code == 0){
							uni.hideLoading();
							this.content = "";
							this.$refs.refListComment[0].getList()
						}else{
							uni.showModal({
								title: res.data.message,
								content: res.data.data.join(' | '),
								success: (res_) => {}
							});
						}
					}
				)
			},
			// 表情按钮
			clickEmoji(){
				this.emojiState = !this.emojiState;
			},
			// 选中表情
			clickclickEmojiItem(item){
				this.content += item;
				this.emojiState = false;
			},
		}
	}
</script>

<style lang="scss">
.comment{
	padding: 0 25rpx;
	.reply-to-post{
		background: $BeiJingSe;
		margin-top: 25rpx;
		padding: 15rpx 20rpx;
		line-height: 45rpx;
		text:nth-child(1){
			flex-shrink: 0;
			display: inline-block;
			background: $HongSe;
			color: #FFF;
			font-size: 28rpx;
			line-height: 28rpx;
			padding: 5rpx;
			margin-right: 10rpx;
		}
	}
	.for{
		padding: 25rpx 0;
		display: flex;
		border-bottom: 1rpx dashed $BianKuangSe;
		.left{
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			position: relative;
			.avatar{
				width: 80rpx;
				height: 80rpx;
				overflow: hidden;
				border-radius: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				background: $BeiJingSe;
			}
			.roleName{
				width: 30rpx;
				height: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 2;
				border: .5px solid #FFF;
				color: #FFF;
				background: $FuZhuSe;
				font-size: 18rpx;
				line-height: 18rpx;
				border-radius: 100rpx;
			}
		}
		.right{
			margin-left: 25rpx;
			flex: 1;
			.top{
				display: flex;
				align-items: center;
				.top-left{
					flex: 1;
					.nickname{
						padding-right: 10rpx;
						font-weight: bold;
					}
					.roleName{
						font-size: 22rpx;
						line-height: 22rpx;
						color: $ZhanWeiSe;
					}
					.the-first-floor{
						color: $LanSe;
						font-size: 22rpx;
						line-height: 22rpx;
						padding-left: 10rpx;
					}
				}
				.top-right{
					display: flex;
					align-items: center;
					view{
						display: flex;
						align-items: center;
						padding-left: 15rpx;
						.iconfont{
							font-size: 35rpx;
							line-height: 35rpx;
							padding-right: 5rpx;
						}
						.db{
							font-size: 28rpx;
							line-height: 28rpx;
						}
					}
				}
			}
			.content{
				line-height: 45rpx;
				margin-top: 5rpx;
			}
			.files-video{
				width: 400rpx;
				height: 200rpx;
				margin: 15rpx 0 25rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				.icon-play{
					font-size: 80rpx;
					line-height: 80rpx;
					color: #FFF;
					text-shadow: 0 0 5rpx #000;
				}
			}
			.files-image{
				display: flex;
				flex-wrap: wrap;
				margin-top: 15rpx;
				view{
					width: 150rpx;
					height: 150rpx;
					overflow: hidden;
					background: $BeiJingSe;
					margin: 10rpx 10rpx 0 0;
				}
			}
			.info{
				display: flex;
				align-items: center;
				margin-top: 15rpx;
				.createTime{
					font-size: 22rpx;
					line-height: 22rpx;
					color: $ZhanWeiSe;
				}
			}
		}
	}
	.text-title{
		font-weight: bold;
		margin: 25rpx 0 0 0;
	}
	.comment-box{
		display: flex;
		margin-top: 20rpx;
		textarea{
			flex: 1;
			margin-right: 25rpx;
			border: 1rpx solid $BianKuangSe;
			background: $BeiJingSe;
			font-size: 28rpx;
			height: 70rpx;
			border-radius: 10rpx;
			padding: 15rpx;
		}
		view{
			flex-shrink: 0;
			width: 120rpx;
			height: 100rpx;
			background: $LanSe;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			line-height: 28rpx;
			color: #FFF;
			border-radius: 10rpx;
		}
	}
	.emoji-button{
		margin-top: 15rpx;
		line-height: 55rpx;
		text{
			font-size: 55rpx;
		}
	}
	.emoji-list{
		scroll-view{
			width:calc(100% - 50rpx);
			height: 270rpx;
			background: $BeiJingSe;
			padding: 25rpx;
			text{
				display: inline-block;
				font-size: 35rpx;
				line-height: 35rpx;
				padding:10rpx 10rpx;
			}
		}
	}
}
</style>
